import React, { useState, useEffect } from 'react';
import logo from '../../assets/images/logo0402.svg';
import deepseek from '../../assets/images/deepseek.svg';
import jiutian from '../../assets/images/jiutian.svg';
import qianwen from '../../assets/images/qianwen.svg';
import llama from '../../assets/images/llama.svg';
import ChatGPT from '../../assets/images/ChatGPT.svg';
import zhipu from '../../assets/images/zhipu.svg';
import { Breadcrumb, Layout, Menu, Input, theme, Button, Divider, Typography, Select, Space, message, Flex, Spin, Modal, Radio, Switch, Segmented } from 'antd';
import { useNavigate } from 'react-router-dom';
import { Attachments, Bubble, Conversations, Prompts, Sender, Welcome, useXAgent, useXChat, XRequest } from '@ant-design/x';
const { SubMenu } = Menu;
import { generateRandomNumber } from '../../utils/common';
import { Link } from 'react-router-dom';
const uuidv4 = require('uuid').v4;
import { AppstoreOutlined, ReconciliationOutlined, ScheduleOutlined, SettingOutlined, PlusOutlined, FileWordOutlined, AlertOutlined } from '@ant-design/icons';
import './index.less';


const { Search } = Input;


const { Header, Content, Footer, Sider } = Layout;

const items = [
    {
        key: 'chatBI',
        label: '首页',
        icon: <AppstoreOutlined />
        // label: <Link to={`/chatBI`}>首页</Link>
    },
    {
        key: 'dataManagement',
        label: '数据管理',
        icon: <ReconciliationOutlined />
        // label: <Link to={`/DataManagement`}>数据管理</Link>
    },
    {
        key: 'knowledgeManagement',
        label: '知识管理',
        icon: <ScheduleOutlined />
        // label: <Link to={`/KnowledgeManagement`}>知识管理</Link>
    },
    {
        key: 'documentManagement',
        label: '文档管理',
        icon: <FileWordOutlined />
        // label: <Link to={`/DataManagement`}>数据管理</Link>
    },
    {
        key: 'CaseOptimization',
        label: '案例优化',
        icon: <AlertOutlined />
        // label: <Link to={`/KnowledgeManagement`}>知识管理</Link>
    }
];

const App: React.FC = () => {
    const [visible, setVisible] = useState(false);
    const [segmentedValue, setSegmentedValue] = useState('mode');
    const [modeValue, setModeValue] = useState<number>(1);
    const [cacheSwitch, setCacheSwitch] = useState(false);
    const [darkMode, setDarkMode] = useState(false);

    // 模式选项配置
    const modeOptions = [
        { id: 1, name: 'DeepSeek-V3', description: '深度求索自研MoE架构模型，671B参数', src: deepseek },
        { id: 2, name: 'Qwen2.5-72B', description: 'Qwen2.5系列72B模型，在编程能力和数学能力方面大幅提升。', src: qianwen },
        { id: 3, name: 'JiuTian-13.9B', description: '九天语言大模型-13.9b-8k-chat v3，支持8K上下文', src: jiutian },
        { id: 4, name: 'llama-3', description: '九天语言大模型-13.9b-8k-chat v3，支持8K上下文', src: llama },
        { id: 5, name: 'ChatGPT-4o', description: '九天语言大模型-13.9b-8k-chat v3，支持8K上下文', src: ChatGPT },
        { id: 6, name: 'GLM-130B', description: '九天语言大模型-13.9b-8k-chat v3，支持8K上下文', src: zhipu }
    ];
    const {
        token: { colorBgContainer, borderRadiusLG }
    } = theme.useToken();
    const [current, setCurrent] = React.useState('chatBI');
    const navigate = useNavigate();
    const onClick = (e: any) => {
        setCurrent(e.key);
        navigate('/' + e.key);
    };
    const defaultConversationsItems = [
        {
            key: uuidv4(),
            label: '梧桐数据分析大模型'
        }
    ];
    let sourseKey = '';
    const [conversationsItems, setConversationsItems] = useState(defaultConversationsItems);
    const [activeKey, setActiveKey] = useState(defaultConversationsItems[0].key);

    const onAddConversation = () => {
        const randomNumber = uuidv4();
        setConversationsItems([...conversationsItems, {
          key: randomNumber,
          label: `新对话 ${conversationsItems.length}`
        }]);
        setActiveKey(randomNumber);
        navigate('/chatBI', { 
          state: { 
            conversationKey: randomNumber, 
            isNew: true 
          } 
        });
      };
    const onConversationClick = (key: any) => {
        navigate('/chatBI', { 
          state: { 
            conversationKey: key, 
            isNew: false 
          } 
        });
        setActiveKey(key);
      };
    const onSearch = (key: any) => {
        // navigate('/chatBI');
        // setActiveKey(key);
    };
    useEffect(() => {
        // 组件挂载或依赖项变化时执行
        return () => {
            setCurrent(window.location.pathname.slice(1));
        };
    }, [window.location.pathname]);
    return (
        <Layout>
            <Sider className="sider">
                {/* 🌟 Logo */}
                <div className="logo">
                    <img src={logo} alt="" />
                    <span>DataAnalyst</span>
                </div>
                {/* 🌟 添加会话 */}
                <Button onClick={onAddConversation} type="link" className="addBtn">
                    <PlusOutlined style={{ marginRight: 10 }} />
                    新对话
                </Button>
                <Menu mode="inline" onClick={onClick} items={items} selectedKeys={[current]} />
                <Divider />
                {/* 🌟 会话管理 */}
                <Search placeholder="搜索历史记录" onSearch={onSearch} className="search" />

                <h3 className="history">历史会话</h3>
                <Conversations items={conversationsItems} className="conversations" activeKey={activeKey} onActiveChange={onConversationClick} />
                <Divider />
                <div className="settings" onClick={() => setVisible(true)} >
                    <SettingOutlined style={{ fontSize: 20 }} />
                    <span>系统设置</span>
                </div>
            </Sider>
            {/* 系统设置 */}
            <Modal title="系统设置" open={visible} onCancel={() => setVisible(false)} footer={null} width={600} destroyOnClose>
                <Segmented
                    block
                    options={[
                        { label: '基座模型', value: 'mode' },
                        { label: '其他设置', value: 'disk' }
                    ]}
                    value={segmentedValue}
                    onChange={setSegmentedValue}
                    style={{ margin: '24px 0px' }}
                />
                {segmentedValue === 'mode' ? (
                    <div style={{ margin: '-16px 0 8px 0' }}>
                        <Radio.Group value={modeValue} onChange={e => setModeValue(e.target.value)} style={{ width: '100%' }}>
                            {modeOptions.map((option, index) => (
                                <div key={option.id}>
                                    <div
                                        style={{
                                            position: 'relative',
                                            display: 'flex',
                                            alignItems: 'center',
                                            padding: '12px 0px 12px 0px',
                                            cursor: 'pointer',
                                            transition: 'background 0.3s',
                                            borderRadius: 8,
                                            margin: '4px 0'
                                        }}
                                        onClick={() => setModeValue(option.id)}
                                    >
                                        <img
                                            style={{
                                                width: 50,
                                                marginRight: 20
                                            }}
                                            src={option.src}
                                            alt=""
                                        />
                                        <div>
                                            <Typography.Text strong>{option.name}</Typography.Text>
                                            <div style={{ marginTop: 4 }}>
                                                <Typography.Text type="secondary">{option.description}</Typography.Text>
                                            </div>
                                        </div>
                                        <Radio
                                            style={{
                                                position: 'absolute',
                                                top: 25,
                                                right: 10
                                            }}
                                            value={option.id}
                                        />
                                    </div>
                                    {index !== modeOptions.length - 1 && <Divider style={{ margin: 0 }} />}
                                </div>
                            ))}
                        </Radio.Group>
                    </div>
                ) : (
                        <Space direction="vertical" size="middle" style={{ display: 'flex', marginBottom: 16 }}>
                            {/* 磁盘缓存设置 */}
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    padding: '12px 16px',
                                    backgroundColor: '#fafafa',
                                    borderRadius: 8
                                }}
                            >
                                <div>
                                    <Typography.Text strong>磁盘缓存</Typography.Text>
                                    <div style={{ marginTop: 4 }}>
                                        <Typography.Text type="secondary">{cacheSwitch ? '已开启自动清理临时文件' : '需要手动清理缓存文件'}</Typography.Text>
                                    </div>
                                </div>
                                <Switch checked={cacheSwitch} onChange={setCacheSwitch} checkedChildren="开启" unCheckedChildren="关闭" />
                            </div>
                            {/* 深色模式设置 */}
                            <div
                                style={{
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                    alignItems: 'center',
                                    padding: '12px 16px',
                                    backgroundColor: '#fafafa',
                                    borderRadius: 8
                                }}
                            >
                                <div>
                                    <Typography.Text strong>深色模式</Typography.Text>
                                    <div style={{ marginTop: 4 }}>
                                        <Typography.Text type="secondary">{darkMode ? '使用暗色主题界面' : '使用亮色主题界面'}</Typography.Text>
                                    </div>
                                </div>
                                <Switch checked={darkMode} onChange={setDarkMode} checkedChildren="开启" unCheckedChildren="关闭" />
                            </div>
                            {/* <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                * 部分设置需要重启应用后生效
                            </Typography.Text> */}
                        </Space>
                    )}
            </Modal>
        </Layout>
    );
};

export default App;
